<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>局部组件</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
<div id="app">
	{{test}}
	<!-- 这里是局部组件 -->
	<local-component></local-component>
	<hr>
	<local-component2></local-component2>
</div>

</body>
<script>
const app = Vue.createApp({
	data() {
		return {
			count: 4,
			test: '应用 & 组件实例基础',
		}
	},
	components:{
		//定义一个局部组件
		'local-component':{
			data:function(){
				return {
					site:'HTML中文网',
					courses:['html', 'css', 'javascript', 'Node.js', 'Vue.js'],
				};
			},
			template: `
				<div>
					<p>欢迎来到  {{site}}，学习</p>
					<ul>
						<li v-for="item in courses">{{item}}</li>
					</ul>
				</div>
			`,
		},
		'local-component2':{
			data:function(){
				return {
					site:'这是局部组件2',
				};
			},
			template: `
				<div>
					<p>site： {{site}}</p>
				</div>
			`,
		}
	}
});

let vm1 = app.mount('#app');
// console.log(vm1);
</script>
</html>